<template>
  <div>
    <div id="ws-real-player" width="100%" height="700" />
  </div>
</template>

<script>
import PlayerManager from '@/utils/icc/PlayerManager';

export default {
  data() {
    return {
      realPlayer: null
    };
  },
  mounted() {
    this.realPlayer = new PlayerManager({
      prefixUrl: 'static/dhPro',
      el: 'ws-real-player' /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/,
      type: 'real' /** real - 实时预览  record - 录像回放 **/,
      maxNum: 4 /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/,
      num: 1 /** 初始化，页面显示的路数 **/,
      showControl: true /** 是否显示工具栏，默认显示 **/,
      showIcons: {
        // 自定义按钮，需要的请配置true, 不需要的按钮请配置false，所有的按钮属性都要写上
        streamChangeSelect: true, // 主辅码流切换
        ivsIcon: true, // 控制智能帧按钮
        talkIcon: true, // 对讲功能按钮
        localRecordIcon: true, // 录制视频功能按钮
        audioIcon: true, // 开启关闭声音按钮
        snapshotIcon: true, // 抓图按钮
        closeIcon: true // 关闭视频按钮
      },
      openIvs: true, // true-开启智能帧/规则线/目标框, false-不显示
      ivsTypeArr: [1, 2], // 传入数组，支持显示的情况, 空表示没有智能信息，1-智能规则线 2-智能目标框
      showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要
      useH265MSE: true, // true-表示硬解  false-软解 默认不传该字段
      picCapCb: true, // 是否需要抓图回调，true-抓图回调触发， false-直接浏览器下载抓图
      receiveMessageFromWSPlayer: (methods, data, err) => {
        /* 回调函数，可以在以下回调函数里面做监听 */
        switch (methods) {
          case 'initializationCompleted':
            // 初始化完成，可调用播放方法（适用于动态加载解码库）
            // 若回调未触发时就使用实时预览/录像回放，则无法播放。
            // 如果需要自定义窗口, 请再此调用增加自定义方法
            this.realPlayer.createCustomDom('custom-domid'); // 给一个domid的唯一id名称(并非dom的id)
            this.realPlayer.playRealVideo({
              channelList: [
                {
                  id: '100000$1$0$0' // {String} 通道编码 -- 用于预览，必填
                  // deviceCode: deviceCode, // {String} 设备编码 -- 用于对讲，对讲必填，无对讲功能可不填
                  // deviceType: deviceType, // {String} 设备类型 -- 用于对讲，对讲必填，无对讲功能可不填
                  // channelSeq: channelSeq, // {String|Number} 通道序号 -- 用于对讲，对讲必填，无对讲功能可不填
                  // cameraType: cameraType, // {String|Number} 摄像头类型 -- 用于云台，云台必填，无云台功能可不填
                  // capability: capability // {String} 能力集 -- 用于云台，选填
                }
              ],
              streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流
              windowIndex: 0 // {Number} 播放窗口序号（从0开始）
            });
            break;
          case 'realSuccess': // 实时预览成功
            console.log('实时预览成功');
            break;
          case 'realError': // 实时预览失败
            console.log('实时预览失败');
            break;
          case 'talkError': // 对讲失败
            console.log('对讲失败');
            break;
          case 'selectWindowChanged': // 选中的窗口发生改变
            console.log(data, '返回窗口信息');
            break;
          case 'windowNumChanged': // 播放器显示的路数发生改变
            console.log(data, '返回显示的窗口数量');
            break;
          case 'customDomInfo': // 监听自定义的窗口回调
            console.log('自定义dom');
            break;
          case 'picCap': // 抓图回调，需在 new PlayerManager 内配置 picCapCb: true 后生效
            console.log(data.base64Img, data.index);
            break;
          case 'closeVideo': // 视频关闭回调
            // 点击关闭按钮引发的视频关闭进行提示
            // 切换视频引发的视频关闭不进行提示
            if (!data.changeVideoFlag) {
              console.log(`窗口${data.selectIndex}的视频已关闭`);
            }
            break;
          case 'statusChanged': // 视频状态发生改变
            break;
          case 'errorInfo': // 错误信息汇总
            console.log(data, '可打印查看错误消息');
        }
      }
    });
    this.startPlayer('rtsp://jy:jyadmin123@223.112.215.230:18081/cam/realmonitor?channel=1&subtype=0');
  },

  methods: {
    /*
  rtspURL为接口返回数据
  格式如下：
	rtsp://10.10.8.5:9100/dss/monitor/param/cameraid=1002241%240%26substream=1?token=16348
  前端传参需要rtsp和ws地址，ws的地址就是rtsp后边带的这一串：10.10.8.5:9100
*/
    // rtsp://jy:jyadmin123@223.112.215.230:18080/cam/realmonitor?channel=1&subtype=0

    startPlayer(rtspURL) {
      // const arr = rtspURL.match(/^rtsp:\/\/([^\/:]+)(:\d*)?/);
      // const host = arr[1];
      // const port = arr[2] || '';
      // const wsStr = `ws://${host}${port}`;
      const wsStr = 'ws://223.112.215.230:18080';
      // console.log('?????拿到了吗', rtspURL, wsStr)
      this.realPlayer.realByUrl({
        playType: 'url', // 写死url
        rtspURL, // 必填
        wsURL: wsStr, // 必填
        // wsURL: "ws://119.36.17.241:9100",
        channelId: 'channelId', // 必传，通道id
        streamType: '1', // 1-主码流  2-辅码流 (可不传，默认主码流)
        selectIndex: '0',
        // playerAdapter: "selfAdaption", //'窗口样式："selfAdaption" 自适应 | "stretching" 拉伸',
        channelData: {
          // 建议传, 通道树信息
          // id: channelCode, // {String} 通道编码
          // deviceCode: deviceCode, // {String} 设备编码
          // deviceType: deviceType, // {String} 设备类型
          // channelSeq: channelSeq, // {String|Number} 通道序号
        } // 选传
      });
    }
  }
};
</script>

<style lang="scss">
// 表格上方查询区域
.searchBarWrap {
  background-color: #fff;
  padding: 18px 16px 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
  // 折叠按钮
  .collapseButtonWrap {
    display: inline-block;
    user-select: none;
    color: rgba(0, 0, 0, 0.1);
    font-size: 18px;
    margin-top: -10px;
    margin-right: 10px;
    border-radius: 3px;
    cursor: pointer;
    i {
      transition: all 0.3s;
      &:hover {
        transform: scale(1.1);
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 12px !important;
  }
}

// 表格区域
.mainTableWrap {
  padding: 8px 16px 16px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 6px;
  box-shadow: 0 10px 10px 0 rgb(0 0 0 / 2%);
  //表格上方按钮区域
  .mainTableWrap_buttonGroup {
    .el-button {
      margin-bottom: 8px;
    }
  }
}
.tabke_container {
  display: flex;
}
</style>
